/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: swx  Date: 2019-03-22 Time: 10:00
 *
 * 通用
 *
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity, Modal,ScrollView
} from 'react-native';
import PropTypes from 'prop-types';
import AntDesign from "react-native-vector-icons/AntDesign"
import {SCREEN_WIDTH} from "../../constant/PHScreen";
import {FetchStatus} from "../../configuration/RequestConfiguration";
import {ReturnStatus} from "../../configuration/ReturnStatus";
import {doDisplayWarnMessage} from "../Message/Action";
import {getDealPeople} from "../../screen/job/WorkOrder/DepartmentalRepairOrderScreen/DepartmentalRepairOrderDetailScreen/Actions";
import connect from "react-redux/es/connect/connect";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";

class DealPeopleView extends Component {

    static propTypes = {
        dealPeople: PropTypes.array,
        dealPeopleName: PropTypes.array,
        dealPeopleDefault: PropTypes.array,
        dealPeopleNameDefault: PropTypes.array,
        changeDealPeople: PropTypes.func, // 点击事件
    }

    static defaultProps = {
        dealPeople: [],
    }

    //构造
    constructor(props) {
        super(props);
        this.state = {
            dealPeopleVisible:false, //modal
            dealPeopleArr:[], //处理人数组
            dealGroup:[], //组别数组
            chooseGroup:'',//选中的组别
            chooseDealPeople:'',//选中的处理人
        };
    }

    componentWillReceiveProps(nextProps, nextContext): void {
        let {dispatch} = this.props;
        if (nextProps.onDealPeople !== this.props.onDealPeople && nextProps.onDealPeople.fetchStatus === FetchStatus.Success) {
            if (nextProps.onDealPeople.RETURN === ReturnStatus.Success) {
                let defaultInfo = nextProps.onDealPeople.DATA;
                let dealGroup = [];
                console.log(JSON.stringify(defaultInfo));
                defaultInfo.map((item, index) => {
                    if(dealGroup.indexOf(item.depart_name)<0){
                        dealGroup.push(item.depart_name)
                    }
                });
                this.setState({
                    dealPeopleArr: defaultInfo,
                    dealGroup:dealGroup
                });
            } else {
                dispatch(doDisplayWarnMessage(nextProps.onDealPeople.MSG))
            }
        }
    }

    // 组件渲染后调用
    componentDidMount() {
        // this.props.navigation.navigate('MainNavigator');
        let {dispatch} = this.props;
        let str = '{}';
        dispatch(getDealPeople(JSON.stringify(str)))
    }

    render() {
        return (
            <View style={{flexDirection: 'row'}}>
                <View>
                    <View style={styles.boxRemark} onPress={()=>{
                    }}>
                        {/* 处理人 */}
                        <View style={styles.remark}>
                            <Text style={styles.containerName}>
                                处理人
                            </Text>
                            <TouchableOpacity style={{flex: 0.7,marginLeft: 15,flexDirection:'column'}} activeOpacity={1} onPress={()=>{
                                this.setState({dealPeopleVisible:true})
                            }}>
                                {
                                    this.props.dealPeople.length===0&&(
                                        <View style={styles.textList}>
                                            <Text style={styles.dealPeople}>
                                                添加处理人
                                            </Text>
                                        </View>
                                    )
                                }
                                {
                                    this.props.dealPeopleName.map((item, index) => {
                                        return this._textListRender(item, index)
                                    })
                                }
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>

                {/*选择处理人*/}
                <Modal visible={this.state.dealPeopleVisible} animationType = {'none'} transparent = {true} onRequestClose={()=> this.onRequestClose()}>
                    <TouchableOpacity style={{flex: 1}} activeOpacity={1}  onPress={()=>{
                    }}>
                        <View style={styles.modalContainer}>
                            <View style={styles.modalBox} >
                                <View style={styles.modalTitle}>
                                    <View>
                                        <Text style={styles.modalTitleText}>
                                            选择处理人
                                        </Text>
                                    </View>
                                    <View style={styles.modalCheck}>
                                        <Text style={styles.modalCheckText} onPress={()=>{
                                            this.setState({dealPeopleVisible: false})
                                        }}>
                                            确定
                                        </Text>
                                    </View>
                                </View>
                                <View style={styles.modalBody}>
                                    <ScrollView showsVerticalScrollIndicator={false} style={styles.modalBodyLeft}>
                                        {
                                            this.state.dealGroup.map((item, index) => {
                                                return this._renderRole(item, index)
                                            })
                                        }
                                    </ScrollView>
                                    <ScrollView showsVerticalScrollIndicator={false} style={styles.modalBodyRight}>
                                        {
                                            this.state.dealPeopleArr.map((item, index) => {
                                                return this._renderDealPeopleArr(item, index)
                                            })
                                        }
                                    </ScrollView>
                                </View>
                            </View>
                        </View>
                    </TouchableOpacity>
                </Modal>
            </View>
        )
    }

    onRequestClose(){
        this.props.changeDealPeople(this.props.dealPeopleDefault,this.props.dealPeopleNameDefault);
        this.setState({
            dealPeopleVisible: false,
        })

    }

    _textListRender = (item, index) => {
        return(
            <View key={index} style={styles.textList}>
                <Text style={styles.dealPeople}>
                    {item}
                </Text>
                <View style={styles.dealPeopleDel}>
                    <AntDesign name={'closecircle'} size={17} style={{color: '#999999'}} onPress={()=>{
                        this.props.dealPeopleName.splice(index,1);
                        this.props.dealPeople.splice(index,1);
                        this.props.changeDealPeople(this.props.dealPeople,this.props.dealPeopleName)
                    }}/>
                </View>
            </View>
        )
    }

    //分组循环
    _renderRole = (item, index) => {
        if(this.state.chooseGroup===""){
            this.state.chooseGroup=item
        }
        return(
            <TouchableOpacity key={index} activeOpacity={1} onPress={()=>{
                this.setState({chooseGroup:item})
            }}>
                {this.leftBoxStyle(item)}
            </TouchableOpacity>
        )
    };

    //判断选中分组
    leftBoxStyle(item){
        if(this.state.chooseGroup===item){
            return(
                <View style={styles.leftBoxChoose}>
                    <Text style={styles.leftText}>
                        {item}
                    </Text>
                </View>
            )
        }else{
            return(
                <View style={styles.leftBox}>
                    <Text style={styles.leftText}>
                        {item}
                    </Text>
                </View>
            )
        }
    }

    //处理人循环
    _renderDealPeopleArr = (item, index) => {
        if(item.depart_name===this.state.chooseGroup){
            return(
                <TouchableOpacity key={index} activeOpacity={1} onPress={()=>{
                    if(this.props.dealPeople.indexOf(item.userid)>=0){
                        this.props.dealPeople.splice(this.props.dealPeople.indexOf(item.userid),1);
                        this.props.dealPeopleName.splice(this.props.dealPeopleName.indexOf(item.username),1);
                    }else{
                        this.props.dealPeople.push(item.userid);
                        this.props.dealPeopleName.push(item.username);
                    }
                    this.props.changeDealPeople(this.props.dealPeople,this.props.dealPeopleName)

                }}>
                    {this.rightBoxStyle(item)}
                </TouchableOpacity>
            )
        }
    }

    rightBoxStyle(item){
        if(this.props.dealPeople.indexOf(item.userid)>=0){
            return(
                <View style={styles.rightBox}>
                    <MaterialCommunityIcons name={'radiobox-marked'} size={25} color={'#1f60ff'} />
                    <Text style={styles.rightTextChoose}>
                        {item.username}
                    </Text>
                </View>
            )
        }else{
            return(
                <View style={styles.rightBox}>
                    <MaterialCommunityIcons name={'radiobox-blank'} size={25} />
                    <Text style={styles.rightText}>
                        {item.username}
                    </Text>
                </View>
            )
        }
    }

}

const props = state => {
    return {
        onCacheRole: state.onCache.role,
        onDealPeople:state.onDealPeople,
    }
}

export default DealPeopleView = connect(props)(DealPeopleView);

const styles = StyleSheet.create({

    boxRemark:{
        width: SCREEN_WIDTH,
        flexDirection: 'column',
        backgroundColor: 'white',
        borderColor: '#FAFAFA',
        borderLeftWidth: 5,
        borderTopWidth: 0,
        borderRightWidth: 5,
        borderBottomWidth: 5,
    },

    textList:{
      flexDirection:'row',
      flex:1,
      marginBottom: 5,
    },

    remark:{
        marginTop:10,
        marginBottom:10,
        marginRight: 20,
        justifyContent: 'center',
        flexDirection:'row'
    },

    dealPeople:{
        fontSize: 20,
        color: '#1f60ff',
    },

    dealPeopleDel:{
        position:'absolute',
        justifyContent: 'center',
        alignItems: 'center',
        right:0,
        top:7,
    },

    containerName:{
        fontSize: 20,
        color: '#999999',
        marginLeft: 15,
        flex: 0.3,
    },

    modalContainer: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)'
    },

    modalBox:{
        alignItems:'center',
        height:300,
        backgroundColor:'white',
        width: SCREEN_WIDTH,
        bottom:0,
        position:'absolute',
    },

    modalTitle:{
        borderBottomColor:'#b2b2b2',
        borderBottomWidth:1,
        height:49,
        width:SCREEN_WIDTH,
        alignItems:'center',
        justifyContent:'center',
        flexDirection:'row',
    },

    modalTitleText:{
        fontSize:20,
        color:'black',
    },

    modalCheck:{
        position:'absolute',
        right: 10,
    },

    modalCheckText:{
        fontSize:17,
        color:'#1f60ff',
    },

    modalBody:{
        flexDirection:'row',
        width:SCREEN_WIDTH,
        height:250,
    },

    modalBodyLeft:{
        width:SCREEN_WIDTH*2/5,
        flexDirection:'column',
        backgroundColor:'#e4e4e4',
    },

    modalBodyRight:{
        width:SCREEN_WIDTH*3/5,
        flexDirection:'column',
    },

    leftBox:{
        justifyContent: 'center',
        alignItems: 'center',
        height:40,
        backgroundColor:'#e4e4e4'
    },

    leftBoxChoose:{
        justifyContent: 'center',
        alignItems: 'center',
        height:40,
        backgroundColor:'#ffffff'
    },

    leftText:{
        fontSize:17,
        color:'black',
    },

    rightBox:{
        alignItems: 'flex-start',
        backgroundColor:'#ffffff',
        minHeight: 40,
        marginLeft:30,
        paddingTop:10,
        flexDirection:'row',
    },

    rightBoxChoose:{
        alignItems: 'flex-start',
        backgroundColor:'#ffffff',
        minHeight: 40,
        marginLeft:30,
        paddingTop:15,
        flexDirection:'row',
    },

    rightText:{
        fontSize:17,
        color:'black',
    },

    rightTextChoose:{
        fontSize:17,
        color:'#1f60ff',
    },
})